//登录成功后显示用户名
let username = localStorage.getItem("username")
if (username != null) {
  console.log(username)
  let usernameStr = username.substring(0, 3)
  let headerLohin = document.querySelector(".headerLohin")
  let login = `
<span>欢迎登录，${usernameStr}</span>
<i>|</i>
<a href="./login.html" id='logout'>注销登录</a>
`
  headerLohin.innerHTML = login
}

//注销
if (username != null) {
  let logout = document.querySelector("#logout")
  logout.addEventListener("click", function () {
    localStorage.removeItem("username")
  })
}

//加鼠标移入移出事件
let lists = document.querySelectorAll(".headerNav_left li")
console.log(lists)
lists.forEach(function (v) {
  v.onmouseover = function () {
    console.log(this)
    this.classList.add("listAll")
    console.log(this.firstElementChild)
    this.firstElementChild.style.color = "#ff6699"
  }
  v.onmouseout = function () {
    this.classList.remove("listAll")
    this.firstElementChild.style.color = "#555"
  }
})

//添加移入移除事件
let save = document.querySelector(".save")
let i = document.querySelector("#star")
console.log(i)
save.addEventListener("mouseenter", function () {
  console.log("11")
  i.style.backgroundPosition = "-53px -255px"
})
save.addEventListener("mouseleave", function () {
  console.log("11")
  i.style.backgroundPosition = "-53px -238px"
})

//skuStyle 里面的li 添加点击事件
let skuLis = document.querySelectorAll(".skuStyle li")
console.log(skuLis)
skuLis.forEach(function (v) {
  v.addEventListener("click", function () {
    console.log(this)
    skuLis.forEach((v) => v.classList.remove("active"))
    this.classList.add("active")
  })
})

//构造函数 url 搜索的参数转化为对象
console.log(location.search)
let obj = new URLSearchParams(location.search)
console.log(obj)
//获取对应的参数 对应的key的value
let id = obj.get("id")
console.log(id) //999474
/*
  根据商品 id 获取商品详情接口
    接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
    接口请求方式：get
    接口参数：
    id  商品的id
    使用方式
    获取id为1的商品的详情
  */
let particularsUrl = `http://jx.xuzhixiang.top/ap/api/detail.php`
axios.get(particularsUrl, { params: { id } }).then(function (r) {
  console.log(r)
  let v = r.data.data
  console.log(v)
  let particularsStr = `
  <img src="${v.pimg + "_lo450.jpg"}" alt="">
  `
  document.querySelector(".particulars_left").innerHTML = particularsStr
  let particularsRig = `
   <p>${v.pdesc}</p>
   `
  document.querySelector(".prtTop").innerHTML = particularsRig
  document.querySelector("#particularsSpan").innerHTML = v.pprice

  //网站头部商品介绍
  let header = document.querySelector("#header")
  header.innerHTML = v.pdesc
})

//加加减减 添加点击事件
let btns = document.querySelectorAll(".buyGos button")
console.log(btns)
let span = document.querySelector(".buyGos span")
let pnum = parseInt(span.innerHTML)
btns[0].addEventListener("click", function () {
  // console.log(pnum--)
  if (pnum == 1) {
    return
  }
  pnum--
  span.innerHTML = pnum
})

btns[1].addEventListener("click", function () {
  pnum++
  span.innerHTML = pnum
})

/*
给用户购物车中添加商品 接口
  接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
  接口请求方式：get
  接口参数：
      uid  用户id
      pid  商品id
      pnum  要添加的商品数量

*/
//导入

// import { goodsCar } from "./index.js"

let btnGos = document.querySelector("#btn2")
btnGos.addEventListener("click", function () {
  let goodsUrl = `http://jx.xuzhixiang.top/ap/api/add-product.php`
  let uid = localStorage.getItem("id")
  let pid = id
  console.log(pid)
  console.log(pnum)
  axios.get(goodsUrl, { params: { uid, pid, pnum } }).then(function (r) {
    console.log(r)
    goodsCar()
  })
})

//购物车
let goosCar = document.querySelector(".goods")
goosCar.addEventListener("click", function () {
  location.href = "goodsCar.html"
})
function goodsCar() {
  let carUrl = `http://jx.xuzhixiang.top/ap/api/cart-list.php`
  let id = localStorage.getItem("id")
  axios.get(carUrl, { params: { id } }).then(function (r) {
    console.log(r.data.data)
    let num = r.data.data.length
    console.log(length)
    let goodsNum = document.querySelector(".goodsNum")
    goodsNum.innerHTML = num
  })
}
goodsCar()
